<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html页面</title>
    <link href="../css/base.css" type="text/css" rel="stylesheet">
    <style type="text/css">
        /*内部css样式*/
        /*标签选择器*/
        div {
            border: solid #7BC5EA;
            margin: 5px 5px;
            padding: 6px 3px;
        }

        /*主区域*/
        #main{
            width: 100%;
         }
        /*行的样式*/
        .rowstyle{
            width: 90%;
            height: 240px;
            /*使用margin进行左右居中*/
            margin: 5px auto;
        }
        /*列的样式*/
        .columnstyle{
            width: 30%;
            float: left;
            height: 50px;
        }

        /*清除浮动属性*/
        .clearAll{
            clear: both;
        }

        /*绝对定位*/
        .absolutePosition{
            position: absolute;
            /*使用top right left bottom 指定被定为的位置*/
            top: 200px;
            left: 600px;
            background-color: #4D2201;
        }
        /*相对定位*/
        .relativePosition{
            position: relative;
            /*使用top right left bottom 指定被定为的位置*/
            top: 400px;
            left: 600px;
            background-color: #3D6271;
        }
    </style>
</head>
<body>
<div id="#main">
    <!--标签的style属性中的样式就是，内联css样式-->
    <div class="rowstyle">
        <div class="columnstyle relativePosition">第一行第一列（相对定位）</div>
        <div class="columnstyle">第一行第二列</div>
        <div class="columnstyle">第一行第三列</div>
        <div class="columnstyle">第二行第一列</div>
        <div class="columnstyle clearAll">第二行第二列（重起一行排列）</div>
        <div class="columnstyle">第二行第三列</div>
    </div>
    <div class="rowstyle">
        <div class="columnstyle absolutePosition">第一行第一列（绝对定位）</div>
        <div class="columnstyle">第一行第二列</div>
        <div class="columnstyle">第一行第三列</div>
        <div class="columnstyle">第二行第一列</div>
        <div class="columnstyle clearAll">第二行第二列（重起一行排列）</div>
        <div class="columnstyle">第二行第三列</div>
    </div>

    <div>这是一个div~~~</div>
    <div>这是一个div~~~</div>

</div>
</body>
</html>